<template>
	<div class="mainbody">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item>发货列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="toolbar-box">
			<div class="list-box">
				<div class="l-list">
					<el-button-group>
						<el-button icon="el-icon-plus" @click="$common.linkUrl('/order/delivery/add')">新增</el-button>
						<el-button icon="el-icon-delete" @click="deleteCheckAll">删除</el-button>
					</el-button-group>
				</div>
				<div class="r-list">
					<div class="search-box">
						<el-input placeholder="输入关健字" v-model="keyword" @keyup.enter.native="initData" clearable>
							<el-button slot="append" icon="el-icon-search" @click="initData"></el-button>
						</el-input>
					</div>
				</div>
			</div>

		</div>

		<div class="content-box">
			<el-card class="table-card">
				<el-table ref="multipleTable" v-loading="loading" :data="listData" stripe class="table-list" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="45"></el-table-column>
					<el-table-column prop="orderNo" label="订单号" min-width="120" show-overflow-tooltip></el-table-column>
					<el-table-column prop="express.title" label="物流公司" width="120"></el-table-column>
					<el-table-column prop="expressCode" label="快递单号" width="150">
						<template slot-scope="scope">
							<span class="nowrap">{{scope.row.expressCode}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="acceptName" label="收货人" width="90"></el-table-column>
					<el-table-column prop="addTime" label="发货时间" width="160"></el-table-column>
					<el-table-column label="状态" width="80">
						<template slot-scope="scope">
							<el-tag size="small" type="info" effect="dark" v-if="scope.row.isDelete==1">已删除</el-tag>
							<el-tag size="small" type="success" effect="dark" v-else>显示</el-tag>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="130">
						<template slot-scope="scope">
							<el-button size="mini" icon="el-icon-printer" @click="openPrintDialog(scope.row)"></el-button>
							<el-button size="mini" icon="el-icon-view" @click="$common.linkUrl('/order/delivery/show/'+scope.row.id)"></el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteItem(scope.row.id)"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>

			<div class="pager-box">
				<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				   :current-page="pageIndex"
				   :page-sizes="[10, 20, 50, 100]"
				   :page-size="pageSize"
				   layout="total, sizes, prev, pager, next, jumper"
				   :total="totalCount">
				</el-pagination>
			</div>
		</div>

		<el-dialog title="打印订单" v-if="currPrintModel.id" :visible.sync="showPrintDialog" fullscreen>
			<div id="printContent" style="line-height:24px;">
				<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" style="font-size:12px; font-family:'微软雅黑'; background:#fff;">
					<tr>
						<td width="40%" height="50" valign="top" style="font-size:20px;">NO.{{currPrintModel.orderId}} 发货单</td>
						<td width="30%">
							订单号：{{currPrintModel.orderNo}}<br />
							日&nbsp;&nbsp; 期：{{currPrintModel.addTime}}
						</td>
						<td width="30%">
							操&nbsp; 作 人：{{adminInfo.userName}}<br />
							打印时间：{{new Date().toLocaleDateString()}}
						</td>
					</tr>
					<tr>
						<td colspan="3" style="padding:8px 0; border-top:1px solid #000;">
							<table width="100%" border="0" cellspacing="0" cellpadding="5" style="font-size:12px; font-family:'微软雅黑'; background:#fff;">
								<tr>
									<td align="left" width="50%" style="background:#ccc;">商品名称</td>
									<td align="left" width="15%" style="background:#ccc;">商品编号</td>
									<td align="left" width="15%" style="background:#ccc;">规格</td>
									<td align="center" width="10%" style="background:#ccc;">单价</td>
									<td align="center" width="10%" style="background:#ccc;">数量</td>
								</tr>
								<tr v-for="(item,index) in currPrintModel.deliveryGoods" :key="index">
									<td valign="top">{{item.orderGoods.goodsTitle}}</td>
									<td valign="top">{{item.orderGoods.goodsNo}}</td>
									<td valign="top">{{item.orderGoods.skuText}}</td>
									<td align="center" valign="top">￥{{item.orderGoods.realPrice}}</td>
									<td align="center" valign="top">{{item.orderGoods.quantity}}</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td colspan="3" style="border-top:1px solid #000;">
							<table width="100%" border="0" cellspacing="0" cellpadding="5" style="margin:5px auto; font-size:12px; font-family:'微软雅黑'; background:#fff;">
								<tr>
									<td width="40%">
										快递公司：{{currPrintModel.express.title}}
									</td>
									<td width="60%">收 件 人：{{currPrintModel.acceptName}}<br /></td>
								</tr>
								<tr>
									<td valign="top">快递单号：{{currPrintModel.expressCode}}</td>
									<td>送货地址：{{currPrintModel.address}}<br /></td>
								</tr>
								<tr>
									<td>实收运费：￥{{currPrintModel.freight}}</td>
									<td valign="top">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 机：{{currPrintModel.mobile}}</td>
								</tr>
								<tr>
									<td>发货备注：{{currPrintModel.remark}}</td>
									<td valign="top">固定电话：{{currPrintModel.telPhone}}</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" icon="el-icon-printer" @click="submitPrintDialog">确 定</el-button>
				<el-button type="warning" @click="cancelPrintDialog">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				showPrintDialog: false, //打印窗口
				currPrintModel: {}, //当前打印项目
				keyword: '',
				totalCount: 0,
				pageSize: 10,
				pageIndex: 1,
				listData: [],
				multipleSelection: [],
				adminInfo: {},
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this;
				let sendUrl = "/admin/order/delivery";
				sendUrl += "?pageSize=" + _this.pageSize;
				sendUrl += "&pageIndex=" + _this.pageIndex;
				if (_this.keyword.length > 0) {
					sendUrl += "&keyword=" + encodeURI(_this.keyword);
				}
				_this.$api.request({
					url: sendUrl,
					beforeSend() {
						_this.loading = true
					},
					success(res) {
						_this.listData = res.data;
						let pageInfo = JSON.parse(res.headers["x-pagination"]);
						_this.totalCount = pageInfo.totalCount;
						_this.pageSize = pageInfo.pageSize;
						_this.pageIndex = pageInfo.pageIndex;
					},
					error(err) {
						_this.listData = []
					},
					complete() {
						_this.loading = false
					}
				});
			},
			//多选删除
			deleteCheckAll() {
				let _this = this; //当前页面
				//拿到选中的数据
				let list = _this.multipleSelection;
				//检查是否有选中
				if (!list.length) {
					_this.$message({ type: 'warning', message: '请选择要删除的记录！' });
					return false;
				}
				//执行删除操作
				_this.$confirm('确认要删除该记录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function () {
					let delIds = [];//创建一个数组
					list.forEach((item, index) => {
						//遍历源数据
						_this.listData.forEach((v, i) => {
							if (item.id == v.id) {
								delIds.push(item.id);
							}
						})
					});
					_this.$api.request({
						method: 'delete',
						url: '/admin/order/delivery?ids=' + delIds.toString(),
						loading: true,
						successMsg: '已删除成功',
						success(res) {
							_this.initData(); //重新加载列表
						}
					})
				}).catch(function () { });
			},
			//单项删除
			deleteItem(val) {
				let _this = this; //当前页面
				//执行删除操作
				_this.$confirm('确认要删除该记录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function () {
					_this.$api.request({
						method: 'delete',
						url: '/admin/order/delivery/' + val,
						loading: true,
						successMsg: '已删除成功',
						success(res) {
							_this.initData();//重新加载列表
						}
					});

				}).catch(function () { });

			},
			//选中第几行
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			//每页显示数量
			handleSizeChange(val) {
				if (this.pageSize != val) {
					this.pageSize = val;
					this.initData();
				}
			},
			//跳转到第几页
			handleCurrentChange(val) {
				if (this.pageIndex != val) {
					this.pageIndex = val;
					this.initData();
				}
			},
			//打开打印窗口
			openPrintDialog(item) {
				this.currPrintModel = item;
				this.showPrintDialog = true;
			},
			//关闭打印窗口
			cancelPrintDialog() {
				this.showPrintDialog = false;
				this.currPrintModel = {};
			},
			//确认打印订单
			submitPrintDialog() {
				var oWin = window.open("", "_blank");
				oWin.document.write(document.getElementById("printContent").innerHTML);
				oWin.focus();
				oWin.document.close();
				oWin.print();
				oWin.close();
				this.showPrintDialog = false;
				this.currPrintModel = {};
				return false;
			},
		},
		created() {
			let _this = this;
			//加载数据
			_this.initData();
			//获取当前用户信息
			_this.$api.request({
				url: '/account/admin/info',
				success(res) {
					_this.adminInfo = res.data
				}
			});
		}
	}
</script>